<template>
  <div class="loginInfo">
    <div class="leftContent">
      <img src="../../assets/logo.svg" alt="" />
      <div class="Content">
        <span class="title">
          <slot name="toRegister">登录</slot>到<br />启点优聘工作台</span
        >

        <span class="explain">
          <slot name="haveAccount"></slot>
          <span > <slot name="goLogin"></slot></span>
        </span>

        <slot name="messPut">
          <div class="personPut">
            <el-input
              class="messageinput"
              v-model="ruleForm.username"
              placeholder="请输入账号"
            >
              <template #prefix>
                <img src="../../assets/user.svg" alt="" />
              </template>
            </el-input>
            <el-input
              class="messageinput"
              v-model="ruleForm.password"
              placeholder="请输入登录密码"
              type="password"
            >
              <template #prefix>
                <img src="../../assets/lock-on.svg" alt="" />
              </template>
            </el-input>
            <div class="check-forget">
              <span> <input type="checkbox" /> 记住账号</span>
              <span class="forget">忘记密码?</span>
            </div>
          </div></slot
        >
        <div class="checkContinue">
          <slot name="checkbutton"><el-button class="continue" @click="submitForm">继续</el-button></slot>
            <slot name="isshowlogin">
              </slot
            >
        </div>
      </div>
      <!-- 登录页使用 -->
      <span class="copyright"
        >Copyright @ 2021-2022 QiDianyoupin. All Rights Reserved</span
      >
    </div>
    <div class="rightContent">
      <div class="rContentTop">
        <span>创造未来</span>
        <span class="spanAnother">启点优聘为老师与学生创作更好的教育方式</span>
      </div>
      <div class="rContent"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
import { useRouter } from "vue-router";
import { ref,reactive } from "vue";
import link from '@/api/link'
import apiUrl from '@/api/apiUrl'

export default class Home extends Vue {
  router = useRouter();
  ruleForm = reactive({
    username:'',
    password:''
  })
  submitForm = () =>{
    link(apiUrl.register,"GET",{},{
      name:this.ruleForm.username,
      pwd:this.ruleForm.password
    }).then((ok:any)=>{
      if(ok.data.length!=0){
        console.log("登录成功")
        this.router.push("/user")
      }else{
        console.log("登录失败")
      }
    })
  }
}
</script>

<style lang="less" scoped>
.loginInfo {
  width: 100%;
  height: 8.56rem;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  display: flex;
  .leftContent {
    width: 50%;
    display: flex;
    flex-direction: column;

    img {
      width: 1.31rem;
      height: 0.26rem;
      margin-left: 0.16rem;
      margin-top: 0.19rem;
    }
    .Content {
      display: flex;
      flex-direction: column;
      width: 4rem;
      height: 4.7rem;
      margin-left: 0.8rem;
      margin-top: 0.8rem;
      margin-bottom: 1rem;
      .title {
        opacity: 1;
        color: rgba(0, 0, 0, 0.9);
        font-size: 0.36rem;
        font-weight: 700;
        font-family: "PingFang SC";
        text-align: left;
        line-height: 0.44rem;
      }
      .explain {
        opacity: 1;
        color: rgba(0, 0, 0, 0.6);
        font-size: 0.14rem;
        font-weight: 400;
        font-family: "PingFang SC";
        text-align: left;
        line-height: 0.22rem;
        margin-top: 0.24rem;
        margin-bottom: 0.48rem;
        span {
          opacity: 1;
          color: rgba(0, 0, 0, 0.9);
          font-size: 0.14rem;
          font-weight: 400;
          font-family: "PingFang SC";
          text-align: left;
          line-height: 0.22rem;
        }
      }
      .personPut {
        width: 4rem;
        height: 1.5rem;
        margin-bottom: 0.48rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .messageinput {
          height: 0.4rem;
        }
        img {
          width: 0.16rem;
          height: 0.16rem;
          margin: 0;
          margin-right: 0.08rem;
        }
        .check-forget {
          height: 0.22rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            display: flex;
            opacity: 1;
            color: rgba(0, 0, 0, 0.6);
            font-size: 0.14rem;
            font-weight: 400;
            font-family: "PingFang SC";
            line-height: 0.22rem;
            input {
              align-self: center;
              margin: 0;
              margin-right: 0.08rem;
              width: 0.16rem;
              height: 0.16rem;
              border-radius: 0.03rem;
              opacity: 1;
              border: 0.01rem solid
                rgba(
                  0.8627451062202454,
                  0.8627451062202454,
                  0.8627451062202454,
                  1
                );
              background: rgba(255, 255, 255, 1);
            }
          }
          .forget {
            color: rgba(22, 93, 255, 1);
            font-size: 0.14rem;
            font-weight: 400;
            font-family: "PingFang SC";
            line-height: 0.22rem;
          }
        }
      }

      .checkContinue {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 0.86rem;

        .continue {
          width: 4rem;
          height: 0.4rem;
          border-radius: 0.03rem;
          opacity: 1;
          background: rgba(22, 93, 255, 1);

          color: rgba(255, 255, 255, 0.9);
          font-size: 16px;
          font-weight: 400;
          font-family: "PingFang SC";
          line-height: 24px;
        }

      }
    }

    .copyright {
      margin-left: 0.8rem;
      width: 4rem;
      color: rgba(0, 0, 0, 0.4);
      font-size: 0.14rem;
      font-weight: 400;
      line-height: 0.22rem;
    }
  }
  .rightContent {
    width: 50%;
    background: rgba(22, 93, 255, 1);
    position: relative;
    .rContentTop {
      width: 7.14rem;
      height: 3.29rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 0.06rem;
      border: 1px dashed #adafb3;
      background-image: url(../../assets/logbg1.svg);
      span {
        margin-top: 0.6rem;
        z-index: 2;
        color: rgba(255, 255, 255, 1);
        font-size: 64px;
        font-weight: 700;
        font-family: "PingFang SC";
      }
      .spanAnother {
        margin-top: 0.12rem;
        color: rgba(255, 255, 255, 1);
        font-size: 24px;
        font-weight: 400;
        font-family: "PingFang SC";
      }
    }
    .rContent {
      position: absolute;
      width: 5.8rem;
      height: 4.75rem;
      border: 1px dashed #adafb3;
      background-image: url(../../assets/logbg2.svg);
      margin-left: 0.8rem;
      top: 3.12rem;
    }
  }
}
</style>